import { Game, createImg, config } from './game';
export abstract class BaseIap {
    game!: Game;
    tag!: string;
    id!: string;
    children: BaseIap[] = [];
    el?: HTMLElement;
    notDestroy: boolean = false;
    cursor?: string;
    fontSize?: number;
    /**
     * 不深度寻找
     */
    findByTag<T>(tag: string): T[] {
        return <T[]>this.children.filter((o) => o.tag == tag);
    }

    create() {
        if (this.el == null) {
            this.onCreate();
            for (let child of this.children) {
                child.create();
            }
        }
    }
    onCreate() {}
    destroy() {
        if (this.notDestroy) return;
        if (this.el) {
            this.el.remove();
            this.el = undefined;
        }
        for (let child of this.children) {
            child.destroy();
        }
    }

    forcedDestruction() {
        if (this.el) {
            this.el.remove();
            this.el = undefined;
        }
        for (let child of this.children) {
            child.forcedDestruction();
        }
    }

    /**不包含自身 */
    depthChildForEach(callback: (iap: BaseIap) => void) {
        for (let child of this.children) {
            callback(child);
            child.depthChildForEach(callback);
        }
    }
    /**包含自身 */
    depthForEach(callback: (iap: BaseIap) => void) {
        callback(this);
        this.depthChildForEach(callback);
    }
}
export class IapBody extends BaseIap {
    static tag = ':IAP';
    version!: string;
    nextStepID!: string;
    /**封面 */
    cover!: string;
    size!: Vector2;
    constructor() {
        super();
        this.tag = IapBody.tag;
    }
}
export class IapStep extends BaseIap {
    static tag = 'step';
    nextStepID?: string;
    bg?: string;
    se?: string;
    bgm?: string;
    video?: string;
    effects?: string[];
    loop?: boolean;
    galText?: string;
    //e-dy
    enterDestroy?: string[];
    //l-dy
    leaveDestroy?: string[];
    duration!: number;

    constructor() {
        super();
        this.tag = IapStep.tag;
    }
}
export class IapButton extends BaseIap {
    static tag = 'button';
    hoverText?: string;
    bound?: Bound;
    se?: string;
    icon?: string;
    text?: string;
    touch?: boolean;
    nextStepID?: string;
    loop?: boolean;
    effects?: string[];
    bg?: string;
    fontColor?: string;
    noClick?: boolean;
    //边框
    border?: boolean;
    //换行模式 vertical-rl 缩减 v-rl,vertical-lr 缩减 v-lr
    writingMode?: string; 
    /**文字对齐 */
    textAlgin?: string;


    //c-dy
    clickDestroy!: string[];
    constructor() {
        super();
        this.tag = IapButton.tag;
    }

    onCreate(): void {
        var btn = this;
        var game = this.game;
        var rect;
        //样式
        if (btn.touch) {
            rect = document.createElement('div');
            rect.style.background = '#ffffff2f';
            rect.style.border = '1px solid rgb(255 38 38)';
        } else if (btn.text) {
            rect = document.createElement('div');
            rect.classList.add('iap-text-btn');
            var textEl = document.createElement("div");
            textEl.textContent = btn.text;
         
            textEl.style.position = "absolute"
            if(this.writingMode) {
                if(this.writingMode == "v-rl" || this.writingMode == "vertical-rl") {
                    textEl.style.writingMode = "vertical-rl"
                }
                else if(this.writingMode == "v-lr" || this.writingMode == "vertical-lr") {
                    textEl.style.writingMode = "vertical-lr";
                }
            }
            switch(this.textAlgin) {
                case Align.Left:
                    textEl.style.left = "0";
                    textEl.style.top = "50%";
                    textEl.style.transform = "translate(0, -50%)";
                    break;
                case Align.LeftTop:
                    textEl.style.left = "0";
                    textEl.style.top = "0";
                    textEl.style.transform = "translate(0,0)";
                    break;
                case Align.LeftBottom:
                    textEl.style.left = "0";
                    textEl.style.bottom = "0";
                    textEl.style.transform = "translate(0,0)";
                    break;
                case Align.Right:
                    textEl.style.right = "0";
                    textEl.style.top = "50%";
                    textEl.style.transform = "translate(0,-50)";
                    break;
                case Align.RightTop:
                    textEl.style.right = "0";
                    textEl.style.top = "0";
                    textEl.style.transform = "translate(0,0)";
                    break;
                case Align.RightBottom:
                    textEl.style.right = "0";
                    textEl.style.bottom = "0";
                    textEl.style.transform = "translate(0,0)";
                    break;
                case Align.Top:
                    textEl.style.left = "50%";
                    textEl.style.top = "0";
                    textEl.style.transform = "translate(-50%,0)";
                    break;
                case Align.bottom:
                    textEl.style.left = "0";
                    textEl.style.bottom = "0";
                    textEl.style.transform = "translate(-50%,0)";
                    break;
                default:
                    textEl.style.left = "50%";
                    textEl.style.top = "50%";
                    textEl.style.transform = "translate(-50%,-50%)";
                    break;
            }
            if(this.fontColor) {
                textEl.style.color = this.fontColor;
            }
            if(this.fontSize) {
                textEl.style.fontSize = game.calcFontSize(this.fontSize);
            }
            rect.appendChild(textEl);
        } else if (btn.icon) {
            rect = createImg();
            rect.classList.add('iap-icon-btn');
            rect.src = btn.icon;
        }
        else {
            //透明的
            rect = document.createElement('div');
            rect.style.background = 'transparent';
        }
        
        if(btn.bg) {
            rect.style.background = `url(${btn.bg})`;
            rect.style.backgroundSize = "100% 100%";
        }

        if(btn.cursor) {
            rect.style.cursor = `url(${btn.cursor}),auto`;
        }
        if (btn.bound) {
            if (btn.bound.left !== undefined && game.size.x) {
                rect.style.left = (btn.bound.left / game.size.x) * 100 + '%';
            }
            if (btn.bound.top !== undefined && game.size.y) {
                rect.style.top = (btn.bound.top / game.size.y) * 100 + '%';
            }
            if (btn.bound.right !== undefined && game.size.x) {
                rect.style.right = (btn.bound.right / game.size.x) * 100 + '%';
            }
            if (btn.bound.bottom !== undefined && game.size.y) {
                rect.style.bottom = (btn.bound.bottom / game.size.y) * 100 + '%';
            }
            if (btn.bound.width !== undefined && game.size.x) {
                rect.style.width = (btn.bound.width / game.size.x) * 100 + '%';
            }
            if (btn.bound.height !== undefined && game.size.y) {
                rect.style.height = (btn.bound.height / game.size.y) * 100 + '%';
            }
            rect.style.position = 'absolute';
            game.body.appendChild(rect);
        }
        this.el = rect;

        rect.style.zIndex = '2';

        rect.addEventListener('click', function (e) {
            if (btn.nextStepID) {
                game.nextSceneById(btn.nextStepID);
            }

            if (btn.se) {
                game.playSe(btn.se, btn.loop);
            }

            if (btn.clickDestroy && btn.clickDestroy.length > 0) {
                game.forcedDestroy(btn.clickDestroy);
            }

            if (btn.effects && btn.effects.length > 0) {
                game.playEffects(btn.effects);
            }
            e.stopPropagation();
            return true;
        });

        if (btn.hoverText) {
            rect.addEventListener('mousemove', function (e) {
                game.hoverTextEl.textContent = btn.hoverText!;

                var bodyRect = game.body.getBoundingClientRect();
                game.hoverTextEl.style.left = e.clientX - bodyRect.left + 15 + 'px';
                game.hoverTextEl.style.top = e.clientY - bodyRect.top + 15 + 'px';
                game.hoverTextEl.style.display = '';
                e.stopPropagation();
                return true;
            });
            rect.addEventListener('mouseleave', function (e) {
                game.hoverTextEl.style.display = 'none';
                e.stopPropagation();
                return true;
            });
        }
    }
}
/** opt选项 */
export class IapOption extends BaseIap {
    static tag : string = "option";
    
    text!: string;
    nextStepID!: string;
    constructor() {
        super();
        this.tag = IapOption.tag;
    }
    onCreate(): void {
        this.el = document.createElement('div');
        this.el.style.zIndex = '' + config.zIndex.option;
        this.el.classList.add('iap-text-menuitem');
        this.el.textContent = this.text;
        this.game.optionGroup.appendChild(this.el);
        this.el.addEventListener("click", (e) => {
            if(this.nextStepID != null) {
                this.game.nextSceneById(this.nextStepID);
            }
            e.stopPropagation();
            return true;
        })
    }
}

export class Bound {
    left!: number;
    top!: number;
    right!: number;
    bottom!: number;
    width!: number;
    height!: number;
}

export class Vector2 {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

export enum Align{
    LeftTop = "lt",
    RightTop = "rt",
    Top = "t",
    Left = "l",
    Right = "r",
    center = "c",
    bottom = "b",
    LeftBottom = "lb",
    RightBottom = "rb",
}